var xmlHttpRequest;
function createXMLHttpRequest()
{
    if (window.XMLHttpRequest) //非IE浏览器
    {
        xmlHttpRequest = new XMLHttpRequest();
    }
    else if (window.ActiveObject)//IE6以上版本的IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
    }
    else //IE6及以下版本IE浏览器
    {
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
    }
}

function showInform(categoryId) {
    console.log(categoryId);
    sendRequest("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse;
    xmlHttpRequest.send(null);
}

function processResponse() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var inform = document.getElementById("inform");
            inform.innerText = resp;
            inform.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform(event){
    var informDiv = document.getElementById('inform');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = informDiv.offsetLeft;
    var divy1 = informDiv.offsetTop;
    var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
    var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('inform').style.display='none';
    }
}

function showInform2(categoryId) {
    console.log(categoryId);
    sendRequest2("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest2(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse2;
    xmlHttpRequest.send(null);
}

function processResponse2() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var fish = document.getElementById("fish");
            fish.innerText = resp;
            fish.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform2(event){
    var fishDiv = document.getElementById('fish');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = fishDiv.offsetLeft;
    var divy1 = fishDiv.offsetTop;
    var divx2 = fishDiv.offsetLeft + fishDiv.offsetWidth;
    var divy2 = fishDiv.offsetTop + fishDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('fish').style.display='none';
    }
}

function showInform3(categoryId) {
    console.log(categoryId);
    sendRequest3("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest3(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse3;
    xmlHttpRequest.send(null);
}

function processResponse3() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var dogs = document.getElementById("dogs");
            dogs.innerText = resp;
            dogs.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform3(event){
    var dogsDiv = document.getElementById('dogs');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = dogsDiv.offsetLeft;
    var divy1 = dogsDiv.offsetTop;
    var divx2 = dogsDiv.offsetLeft + dogsDiv.offsetWidth;
    var divy2 = dogsDiv.offsetTop + dogsDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('dogs').style.display='none';
    }
}

function showInform4(categoryId) {
    console.log(categoryId);
    sendRequest4("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest4(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse4;
    xmlHttpRequest.send(null);
}

function processResponse4() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var reptiles = document.getElementById("reptiles");
            reptiles.innerText = resp;
            reptiles.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform4(event){
    var reptilesDiv = document.getElementById('reptiles');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = reptilesDiv.offsetLeft;
    var divy1 = reptilesDiv.offsetTop;
    var divx2 = reptilesDiv.offsetLeft + reptilesDiv.offsetWidth;
    var divy2 = reptilesDiv.offsetTop + reptilesDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('reptiles').style.display='none';
    }
}

function showInform5(categoryId) {
    console.log(categoryId);
    sendRequest5("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest5(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse5;
    xmlHttpRequest.send(null);
}

function processResponse5() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var cats = document.getElementById("cats");
            cats.innerText = resp;
            cats.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform5(event){
    var catsDiv = document.getElementById('cats');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = catsDiv.offsetLeft;
    var divy1 = catsDiv.offsetTop;
    var divx2 = catsDiv.offsetLeft + catsDiv.offsetWidth;
    var divy2 = catsDiv.offsetTop + catsDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('cats').style.display='none';
    }
}

function showInform6(categoryId) {
    console.log(categoryId);
    sendRequest6("categoryShowJsServlet?categoryId=" + categoryId);
    //sendRequest("categoryShowJsServlet");
}

function sendRequest6(url) {
    createXMLHttpRequest();
    xmlHttpRequest.open("GET", url, true);
    xmlHttpRequest.onreadystatechange = processResponse6;
    xmlHttpRequest.send(null);
}

function processResponse6() {
    if (xmlHttpRequest.readyState == 4) {
        if (xmlHttpRequest.status == 200) {
            var resp = xmlHttpRequest.responseText;
            //显示悬浮层
            var birds = document.getElementById("birds");
            birds.innerText = resp;
            birds.style.display = "block";
        }
    }
}

//隐藏悬浮层
function hiddenInform6(event){
    var birdsDiv = document.getElementById('birds');
    var x=event.clientX;
    var y=event.clientY;
    var divx1 = birdsDiv.offsetLeft;
    var divy1 = birdsDiv.offsetTop;
    var divx2 = birdsDiv.offsetLeft + birdsDiv.offsetWidth;
    var divy2 = birdsDiv.offsetTop + birdsDiv.offsetHeight;
    if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
        document.getElementById('birds').style.display='none';
    }
}
